{% extends "base.html" %}
{% load staticfiles %}
{% block title %}
首页
{% endblock %}
{% block content %}
<link href="{% static 'css/home.css' %}" rel="stylesheet">
<script src="{% static 'js/jqthumb.min.js' %}"></script>
<!-- 广告横幅 -->
<div id="ad" class="carousel slide" data-ride="carousel" data-interval="5000">
  <ol class="carousel-indicators">
    <li data-target="#ad" data-slide-to="0" class="active"></li>
    <li data-target="#ad" data-slide-to="1"></li>
    <li data-target="#ad" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="{% static 'img/banner1.jpg' %}" alt="广告横幅1">
    </div>
    <div class="item">
      <img src="{% static 'img/banner2.jpg' %}" alt="广告横幅2">
    </div>
    <div class="item">
      <img src="{% static 'img/banner3.jpg' %}" alt="广告横幅3">
    </div>
  </div>
  <a class="left carousel-control" href="#ad" data-slide="prev"><span
      class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#ad" data-slide="next"><span
      class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!-- 主体内容 -->
<div class="container">
  <div class="row row-3">

    <div class="col-md-4">
      <!-- 企业概况 -->
      <span class="part1">
        <a href="{% url 'aboutApp:survey' %}">企业概况</a>
      </span>
      <span class="part1 en">
        &nbsp;&nbsp;/ About Us
      </span>
      <div class="line1">
        <div class="line2 theme"></div>
      </div>
      <div style="margin-top:20px;">
        <img class="img-responsive" src="{% static 'img/aboutCompany.jpg' %}">
        <p class="text1">
          恒达科技有限企业，位于中国某高新技术产业开发区,
          以社会公共安全领域为主要应用方向，提供极速、准确和防伪装的人脸识别产品。
        </p>
      </div>
    </div>

    <div class="col-md-8">
      <!-- 新闻动态 -->
      <span class="part1">
        <a href="#">新闻动态</a>
      </span>
      <span class="part1 en">
        &nbsp;&nbsp;/ News
      </span>
      <a class="btn btn-default btn-xs more-btn" href="{% url 'newsApp:news' 'company' %}">
        +&nbsp;更多
      </a>
      <div class="line1">
        <div class="line2 theme"></div>
      </div>
      <div class="col-md-5">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators nav-point">
            {% for post in postList %}
            <li data-target="#myCarousel" data-slide-to="{{forloop.counter0}}" {% if forloop.first %} class="active"
              {% endif %}>
            </li>
            {% endfor %}
          </ol>
          <!-- 轮播（Carousel）项目 -->
          <div class="carousel-inner" style="margin-top:15px;">
            {% for post in postList %}
            <div {% if forloop.first %} class="item active" {% else %} class="item" {% endif %}
              style="background-size:cover;">
              <a href="{% url 'newsApp:newDetail' post.id %}"><!--这里不显示链接符号-->
                <img src="{{post.photo.url}}" class="img-responsive" onload="DrawImage(this)"></a>
              <div class="carousel-caption nav-title">{{post.title}}</div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="col-md-7">
        <ul class="list-unstyled list-new">
          {% for mynew in newList %}
          <li>
            <a href="{% url 'newsApp:newDetail' mynew.id %}">
              {{mynew.title|truncatechars:"15"}}</a>
            <span>【{{mynew.publishDate|date:"Y-m-d"}}】</span>
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>

  </div>

  <div class="row row-3">

    <div class="col-md-4">
      <!-- 通知公告 -->
      <span class="part1">
        <a href="#">通知公告</a>
      </span>
      <span class="part1 en">
        &nbsp;&nbsp;/ Public Release
      </span>
      <a class="btn btn-default btn-xs more-btn" href="{% url 'newsApp:news' 'notice' %}">
        +&nbsp;更多
      </a>
      <div class="line1">
        <div class="line2 theme"></div>
      </div>
      <div>
        <img class="img-responsive" src="{% static 'img/note.jpg' %}">
        <ul class="list-unstyled list-new">
          {% for note in noteList %}
          <li>
            <a href="{% url 'newsApp:newDetail' note.id %}">
              {{note.title|truncatechars:"25"}}
            </a>
            <a href="{% url 'newsApp:newDetail' note.id %}" class="public-detail">
              查看详情>>
            </a>
          </li>
          {% endfor %}
        </ul>
      </div>


    </div>

    <div class="col-md-4">
      <!-- 科研基地 -->
      <span class="part1">
        <a href="{% url 'scienceApp:science' %}">科研基地</a>
      </span>
      <span class="part1 en">
        &nbsp;&nbsp;/ Technology Center
      </span>
      <div class="line1">
        <div class="line2 theme"></div>
      </div>
      <div>
        <a href="{% url 'scienceApp:science' %}">
          <img class="img-responsive" src="{% static 'img/ky.jpg' %}">
        </a>
        <p class="text1">
          <font color="#d30a1c">恒达科技科研基地</font>
          恒达科研基地分为计算机视觉、 机器人和视觉深度学习三个事业部，共拥有高级研发人员近30名，
          以各领域高级工程师和知名院校博士为主体的多层次研发梯队。当前，科研基地优秀的技术团队
          已为恒达在人脸识别、物联网平台搭建、机器人导航等 领域打下了坚实基础
        </p>
      </div>

    </div>

    <div class="col-md-4">
      <!-- 联系我们 -->
      <span class="part1">
        <a href="{% url 'contactApp:contact' %}">联系我们</a>
      </span>
      <span class="part1 en">
        &nbsp;&nbsp;/ Contact us
      </span>
      <div class="line1">
        <div class="line2 theme"></div>
      </div>
      <div>
        <ul class="list-unstyled procurement-li">
          <li>业务质询一：111-XXXXXX</li>
          <li>业务质询二：222-XXXXXX</li>
          <li>咨询电话：0111-XXXXXX</li>
          <li>企业传真：0222-XXXXXX</li>
          <li>地址：某某某新区某某大道1号</li>
          <li>邮编：XXXXXX</li>
          <li>
            网址：<a href="http://python3web.com">http://python3web.com</a>
          </li>
        </ul>
        <div class="platform"><a href="{% url 'contactApp:contact' %}">详情</a></div>
      </div>

    </div>

  </div>

  <div class="row row-3">
    <!-- 产品中心 -->
    <div class="col-md-12 col-pro">

      <span class="part1">
        <a href="{% url 'productsApp:products' 'robot' %}">产品中心</a>
      </span>
      <span class="part1 en">
        &nbsp;&nbsp;/ Products
      </span>
      <a class="btn btn-default btn-xs more-btn" href="{% url 'productsApp:products' 'robot' %}">
        +&nbsp;更多
      </a>
      <div class="line1" style="margin-bottom:5px;">
        <div class="line2 theme"></div>
      </div>
      <div class="col-md-12 col-pro">
        <div id="Carousel" class="carousel slide" style="margin-bottom:30px">
          <ol class="carousel-indicators" style="display:none;">
            <li data-target="#Carousel" data-slide-to="0" class="active"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active">
              <div class="row">
                {% for product in productList %}
                <div class="col-md-3 pro-images">
                  <a href="{% url 'productsApp:productDetail' product.id %}" class="thumbnail">
                    {% for img in product.productImgs.all %}
                    {% if forloop.first %}
                    <img src="{{img.photo.url}}" alt="产品图片" class="img-responsive" onload="DrawImage(this)">
                    {% endif %}
                    {% endfor %}
                  </a>
                  <div class="carousel-caption nav-title">{{product.title}}</div>
                </div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="row row-3">
    <!-- 友情链接 -->
    <div class="col-md-12">
    </div>
  </div>

</div>

<script>
  //处理缩略图
  function DrawImage(hotimg) {
    $(hotimg).jqthumb({
      width: '100%', // 宽度
      height: '220px', // 高度
      zoom: '1', // 缩放比例
      method: 'auto' // 提交方法，用于不同的浏览器环境，默认为‘auto’
    });
  }
</script>
{% endblock %}